import React, { useEffect, useState } from 'react'
import { DownOutlined } from '@ant-design/icons';
import { Button, Col, Form, Input, Row, Select, Space, theme } from 'antd';
import type { QuestionTypeItem, sortItem, searchQuestionParams } from '@/service/type'
import style from './searchCon.module.scss'

interface Props {
  questionsType: QuestionTypeItem[]
  questionsSort: sortItem[]
  onSearchSort: (item: any) => void; 
  query: searchQuestionParams
  setQuery: (query: searchQuestionParams) => void
}
const { Option } = Select;
export const AdvancedSearchForm: React.FC<Props> = ({
  questionsType,
  questionsSort,
  onSearchSort,
  setQuery,
  query
}) => {
  const { token } = theme.useToken();
  const [form] = Form.useForm();
  const [expand, setExpand] = useState(false);

  const formStyle: React.CSSProperties = {
    maxWidth: 'none',
    background: token.colorFillAlter,
    borderRadius: token.borderRadiusLG,
    padding: 24,
  };

  
  
  const getFields = () => {
    const children = [];
    
      children.push(
        <Row gutter={5} key="search-form-row">
        <Col span={8} key='col-1'>
            
            <Form.Item
              name='question'
              label={`试题搜索`}
              rules={[ ]}
            >
              <Input />
            </Form.Item>
            
          </Col>
          <Col span={8} className={style.seaBtn}  key='col-2' >
            <Form.Item>
              <Button  type="primary" htmlType="submit">
                搜索
              </Button>
            </Form.Item>
          </Col>
          
          <Col span={6}  key='col-3' >
            <Form.Item
              name='type'
              label={`试题分类`}
              rules={[ ]}
              // initialValue='请选择'
              
            >
              <Select
                onChange={(e) => {
                  console.log('type', e)
                  onSearchSort({
                    ...query,
                    type: e
                  })
                }}
              >
                {questionsSort?.map(it => 
                  <Select.Option key={it._id} value={it.value}>{it.name}</Select.Option>
                )}
                
              </Select>
            </Form.Item>
            </Col>
            <Col span={8}  key='col-4'>
            <Form.Item
              name='classify'
              label={`题目类型`}
              rules={[
               
              ]}
              // initialValue='请输入题型'
            >
              <Select
              onChange={(e) => {
                console.log('classify',e)

                onSearchSort({
                  ...query,
                  classify: e
                })
              }}
              >
              {questionsType?.map(it => 
                <Select.Option key={it._id} value={it.name}>{it.name}</Select.Option>
              )}
              </Select>
            </Form.Item>
            </Col>
        
        </Row>,
      );
    
    return children;
  };

  const onFinish = (values: any) => {
    console.log('Received values of form: ', values);
    onSearchSort(values)
    // setQuery({
    //   ...query,
    //   ...values
    // })
  };

  return (
    <Form
    className={style.form}
    form={form}
    name="advanced_search"
    style={formStyle}
    onFinish={onFinish}
    >
      <Row gutter={0}>{getFields()}
       
      </Row>
      <div style={{ textAlign: 'right' }}>
        
      </div>
    

    
    </Form>
  );
}